<template>
  <div v-if="browserRedirect" style="background-color: #fff;padding:25px 15px;border-radius: 6px;">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="工作室账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input disabled :value="listData.name"></a-input>
        <!-- <a-input v-else v-decorator="[ 'factoryName', validatorRules.factoryName]" placeholder="请输入工作室名称"></a-input> -->
      </a-form-item>
      <a-form-item label="工作室名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input :disabled="listData.status!=0" v-model="listData.factoryName"></a-input>
        <!-- <a-input v-if="listData.status == 0" disabled :value="listData.name"></a-input> -->
        <!-- <a-input v-else v-decorator="['factoryName', validatorRules.factoryName]" placeholder="请输入工作室名称"></a-input> -->
      </a-form-item>
      <a-form-item label="工作室简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-textarea v-if="listData.companyProfile" disabled :value="listData.companyProfile"></a-textarea>
        <a-textarea v-else disabled value=""></a-textarea>
      </a-form-item>
      <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-if="listData.linkName" disabled :value="listData.linkName"></a-input>
        <a-textarea v-else disabled value=""></a-textarea>
      </a-form-item>
      <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-if="listData.phone" disabled :value="listData.phone"></a-input>
        <a-textarea v-else disabled value=""></a-textarea>
      </a-form-item>
      <a-form-item label="工作室地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-if="listData.address" disabled :value="listData.address"></a-input>
        <a-textarea v-else disabled value=""></a-textarea>
      </a-form-item>
      <a-form-item label="⼯作室logo" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <img v-if="listData.imageurl" style="width:90px;height:90px;" :src="urlImg+'/'+listData.imageurl">
        <span v-else>暂无图片</span>
      </a-form-item>
      <div v-if="listData.status != 1 && listData.status != 3" style="padding:8px 10px;border-radius:4px;margin-top:-10px;margin-bottom:15px;margin-left:20%;border:1px solid #FFA39E;background:rgba(255,241,240,1);">
        请确保资料准确，提交后24小时内不可修改，我们将在24小时内审核完成！
      </div>
    </a-form>
  </div>
  <a-card v-else :bordered="false" style="border-radius: 10px;">
    <div>
      <!-- <div style="font-size: 16px;font-weight: bold;padding-bottom: 20px;">基础信息</div> -->
      <div style="width:40%;margin-left:20%;">
        <a-spin :spinning="confirmLoading">
          <a-form :form="form" @submit="handleAgain">
            <a-form-item label="⼯作室logo" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <JUploadOneImg v-if="listData.status != 3" v-model="listData.imageurl" :trigger-change="true"></JUploadOneImg>
              <img v-if="listData.status == 3" style="margin-left:15px;width:50px;height:50px;border-radius: 50px;" :src="'https://blockinsight.com.cn/jeecg-boot/'+listData.imageurl" alt="⼯作室logo">
            </a-form-item>
            <a-form-item label="工作室账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled :value="listData.name"></a-input>
            </a-form-item>
            <a-form-item label="工作室名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="listData.status!=0" v-model="listData.factoryName"></a-input>
            </a-form-item>
            <a-form-item label="工作室简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea v-if="listData.status == 3" disabled :value="listData.companyProfile"></a-textarea>
              <a-textarea v-else v-model="listData.companyProfile" placeholder="请输入工作室简介"/>
            </a-form-item>
            <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-if="listData.status == 3" disabled :value="listData.linkName"></a-input>
              <a-input v-else v-model="listData.linkName" placeholder="请输入联系人"></a-input>
            </a-form-item>
            <a-form-item label="工作室地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-if="listData.status == 3" disabled :value="listData.address"></a-input>
              <a-input v-else v-model="listData.address" placeholder="请输入工作室地址"></a-input>
            </a-form-item>
            <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-if="listData.status == 3" disabled :value="listData.phone"></a-input>
              <a-input v-else v-model="listData.phone" placeholder="请输入联系电话"></a-input>
            </a-form-item>
            <div v-if="listData.status == 0" style="margin-top:-10px;margin-bottom:15px;padding:8px 10px;border-radius:4px;margin-left:20%;border:1px solid #FFA39E;background:rgba(255,241,240,1);">
              请确保资料准确，提交后24小时内不可修改，我们将在24小时内审核完成！
            </div>
            <div v-if="listData.status == 2" style="margin-top:-10px;margin-bottom:15px;padding:8px 10px;border-radius:4px;margin-left:20%;border:1px solid #FFA39E;background:rgba(255,241,240,1);">
              审核未通过，拒绝理由：{{listData.statusFailReason}}
            </div>
            <a-form-item :wrapper-col="{ span: 24, offset: 5 }">
              <a-button type="primary" v-if="listData.status != 3" style="width: 50%;" html-type="submit">
                提交
              </a-button>
              <a-button type="primary" disabled v-if="listData.status == 3" style="width: 50%;" html-type="submit">
                审核中
              </a-button>
            </a-form-item>
          </a-form>
        </a-spin>
        <a-modal
          title="信息确认"
          centered
          v-model="modal2Visible"
          @ok="handleSubmit()"
        >
          <p>
            <span>工作室账号:</span>
            <span style="margin-left:15px;">{{listData.name}}</span>
          </p>
          <p>
            <span>工作室名称:</span>
            <span style="margin-left:15px;">{{listData.factoryName}}</span>
          </p>
          <p>
            <span>工作室简介:</span>
            <span style="margin-left:15px;">{{listData.companyProfile}}</span>
          </p>
          <p>
            <span>联系人:</span>
            <span style="margin-left:15px;">{{listData.linkName}}</span>
          </p>
          <p>
            <span>工作室地址:</span>
            <span style="margin-left:15px;">{{listData.address}}</span>
          </p>
          <p>
            <span>联系电话:</span>
            <span style="margin-left:15px;">{{listData.phone}}</span>
          </p>
          <p>
            <span>⼯作室logo:</span>
            <img style="margin-left:15px;width:50px;height:50px;border-radius: 50px;" :src="listData.imageurl" alt="⼯作室logo">
          </p>
        </a-modal>
      </div>
    </div>
  </a-card>
</template>

<script>  
  // import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { browserRedirect } from '@/utils/util'
  import { httpAction,getAction } from '@/api/manage'
  import JProviewImg from '@/components/jeecg/JProviewImg.vue'
  import {initDictOptions, filterMultiDictText} from '@/components/dict/JDictSelectUtil'
  import JUploadOneImg from '@/components/jeecg/JUploadOneImg'

  export default {
    name: "BlockManufacturerInfoMessageList",
    // mixins:[JeecgListMixin],
    components: {
      JUploadOneImg,
      JProviewImg
    },
    data () {
      return {
        modal2Visible:false,
        browserRedirect:false,
        confirmLoading: false,
        showInfo:false,
        showAdd:false,
        form: this.$form.createForm(this),
        toggleSearchStatus:"",
        showImg:false,
        proviewUrl:"",
        urlImg: window._CONFIG['imgDomainURL'],
        description: '工作室信息管理页面',
        validatorRules:{
          factoryName:{rules: [{ required: true, message: '请输入工作室名称!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          companyProfile:{rules: [{ required: true, message: '请输入工作室简介!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          type:{rules: [{ required: true, message: '请输入生产商类型!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          name:{rules: [{ required: true, message: '请输入联系人!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          address:{rules: [{ required: true, message: '请输入工作室地址!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          phone:{rules: [{ required: true, message: '请输入联系电话!' },{ 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },]},
          imageurl:{rules: []} 
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        // 表头
        columns: [
          {
            title:'工作室名称',
            align:"center",
            dataIndex: 'factoryName'
          },
          {
            title:'工作室简介',
            align:"center",
            dataIndex: 'companyProfile'
          },
          {
            title:'创建日期',
            align:"center",
            dataIndex: 'createTime'
          },
          // {
          //   title:'生产商类型',
          //   align:"center",
          //   dataIndex: 'type'
          // },
          {
            title:'联系人',
            align:"center",
            dataIndex: 'linkName'
          },
          {
            title:'审核状态',
            align:"center",
            dataIndex: 'status',
            customRender:(text)=>{
                return filterMultiDictText(this.dictOptions['status'], text+"")
            }
          },
          {
            title:'工作室地址',
            align:"center",
            dataIndex: 'address'
          },
          {
            title:'联系电话',
            align:"center",
            dataIndex: 'phone'
          },
          {
            title:'工作室LOGO',
            align:"center",
            dataIndex: 'imageurl',
            scopedSlots: {customRender: 'imgSlot'}
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list:"/block/blockManufacturerInfo/list",
          add: "/block/blockManufacturerInfo/add",
          edit: "/block/blockManufacturerInfo/edit",
        },
        dictOptions:{
         status:[],
        },
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5', '10', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        selectedMainId:'',
        userAuth2btn:"1",
        listData:{}
      }  
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    mounted() {
      this.browserRedirect = browserRedirect();
      this.listInfo();
    },
    methods: {
      listInfo(){
        let list={
          column: "createTime",
          order: "desc",
          field: "id,,factoryName,companyProfile,createTime,type,name,status,address,phone,imageurl,action",
          pageNo: 1,
          pageSize: 5
        };
        getAction("/block/blockManufacturerInfo/list",list).then((res)=>{
          if (res.success) {
            this.listData = res.result.records[0];
            // if(this.listData.status == 0){
            //   this.showInfo = true;
            // }else{
            //   this.showInfo = false;
            // }
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      jump(num){
        if(num == 1){
          this.showInfo = true;
        }
        if(num == 2){
          this.$router.push("/block/BlockProductInfoList")
        }
      },
      handleAgain(){
        var that = this;
        if(!this.listData.factoryName){
          that.$message.warning("请输入工作室名称！");
          return
        }
        if(!this.listData.companyProfile){
          that.$message.warning("请输入工作室简介！");
          return
        }
        if(!this.listData.linkName){
          that.$message.warning("请输入联系人！");
          return
        }
        if(!this.listData.address){
          that.$message.warning("请输入工作室地址！");
          return
        }
        if(!this.listData.phone){
          that.$message.warning("请输入联系电话！");
          return
        }
        if(!this.listData.imageurl){
          that.$message.warning("请上传⼯作室logo！");
          return
        }
        if(this.listData.imageurl.indexOf(',')!=-1){
          that.$message.warning("请上传一个⼯作室logo！");
          return
        }
        this.modal2Visible=true;
      },
      handleSubmit(){
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            values.name=this.listData.name;
            values.id=this.listData.id;
            values.companyProfile=this.listData.companyProfile;
            values.phone=this.listData.phone;
            values.factoryName=this.listData.factoryName;
            values.linkName=this.listData.linkName;
            values.address=this.listData.address;
            values.imageurl=this.listData.imageurl;
            // let httpurl = '';
            // let method = '';
            // if(that.listData.status == 0){
            //   httpurl+=this.url.add;
            //   method = 'post';
            // }else{
            //   httpurl+=this.url.edit;
            //    method = 'put';
            // }
            // let formData = Object.assign(this.model, values);
            httpAction(this.url.edit,values,"put").then((res)=>{
              this.modal2Visible=false;
              if(res.success){
                this.listInfo();
                that.$message.success(res.message);
              }else{
                that.$message.warning(res.message);
              }
            })
          }
         
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .styXcl /deep/ .ant-table-align-center{
    min-width:100px;
    max-height:100px;
  }
  .verMidel{
    display: inline-block;
    height: 42px;
    line-height: 42px;
  }
  .inputSty{
    padding: 8px;
    height: 42px;
    box-sizing: border-box;
  }
</style>